<template>
  <div id="app">
    <!-- <transition :name="transitionName">
      <keep-alive>
        <router-view />
      </keep-alive>
    </transition>-->
    <keep-alive>
      <router-view />
    </keep-alive>
    <vue-progress-bar></vue-progress-bar>
  </div>
</template>

<style lang="stylus">
#app
  font-family 'Avenir', Helvetica, Arial, sans-serif
  -webkit-font-smoothing antialiased
  -moz-osx-font-smoothing grayscale
  text-align center
  color #2c3e50
  position fixed
  left 0
  right 0
  top 0
  bottom 0
  font-size 60px
  margin 0.2rem
  overflow scroll
  background #fff

.nav
  a
    font-weight bold
    color #2c3e50

    &.router-link-exact-active
      color #42b983

.slide-left-enter-active, .slide-left-leave-active, .slide-right-enter-active, .slide-right-leave-active
  transition all 400ms
  position absolute
  width 100%
  height 100%

.slide-left-enter, .slide-right-leave-to
  transform translate(100%)

.slide-left-leave-to, .slide-right-enter
  transform translate(-100%)
</style>
<script lang="ts">
export default {
  data: () => ({ transitionName: "" }),
  // watch: {
  //   $route(to, from) {
  //     // 实现前进左滑，后退右滑（注意：执行location.reload()后失效）
  //     this.transitionName =
  //       to.meta.time < from.meta.time ? "slide-right" : "slide-left";
  //   }
  // },
  mounted() {
    //  [App.vue specific] When App.vue is finish loading finish the progress bar
    this.$Progress.finish();
  },
  created() {
    //  [App.vue specific] When App.vue is first loaded start the progress bar
    this.$Progress.start();
    //  hook the progress bar to start before we move router-view
    this.$router.beforeEach((to, from, next) => {
      !to.meta.time && (to.meta.time = Date.now());
      //  does the page we want to go to have a meta.progress object
      if (to.meta.progress !== undefined) {
        let meta = to.meta.progress;
        // parse meta tags
        this.$Progress.parseMeta(meta);
      }
      //  start the progress bar
      this.$Progress.start();
      //  continue to next page
      next();
    });
    //  hook the progress bar to finish after we've finished moving router-view
    this.$router.afterEach((to, from) => {
      //  finish the progress bar
      this.$Progress.finish();
    });
  }
};
</script>

